<template>
  <div class="full-width flex items-center justify-end pagination">
    <span class="self-center col-auto q-mr-xs">共计{{total}}条记录</span>

    <q-select
      class="col-auto self-center text-center q-pl-xs"
      dense outlined emit-value map-options options-dense
      v-model="pages"
      :options="perPageNumOptions"
      @input="changePageSize"
    />
    <q-pagination
      v-model="pageCur"
      :max="pageNum"
      :max-pages="maxPages"
      :boundary-numbers="true"
      :boundary-links="true"
      @input="isChangePageSize = true"
      size="12px"
    />
    <span class="self-center col-auto">前往</span>
    <q-input outlined dense class="q-mx-xs input-text" mask="##################"
             v-model="toPage" @keyup.enter="onPageChange(toPage)"
             :input-style="{fontSize:'12px',width:'22px',textAlign:'center',lineHeight:'22px'}" />
    <span class="self-center col-auto">页</span>
  </div>
</template>

<script>
export default {
  name: 'pagination',
  props: {
    value: Number,
    pageSize: { // 每页多少条
      type: Number,
      default: 10
    },
    total: { // 一共多少条
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      isChangePageSize: true,
      pageCur: 1,
      maxPages: 6, // 一次显示的g最大页面链接数；0表示无限
      // 每页多少条列表
      perPageNumOptions: [
        { label: '15条/页', value: 15 },
        { label: '30条/页', value: 30 },
        { label: '45条/页', value: 45 },
        { label: '60条/页', value: 60 }
      ],
      pages: this.pageSize, // 一共多少页
      toPage: null // 跳转到哪一页
    }
  },
  watch: {
    pageSize (val) {
      this.pages = val
    },
    value: {
      handler (val) {
        this.pageCur = val
      },
      deep: true,
      immediate: true
    },
    pageCur: {
      deep: true,
      handler (val) {
        this.$emit('input', val)
        if (Number(val) && Number(val) > 0 && this.isChangePageSize) {
          this.toPage = Number(val)
          this.$emit('changePage', Number(val))
        }
      }
    }
  },
  methods: {
    // 翻页
    onPageChange (val) {
      this.isChangePageSize = true
      if (Number(val) && Number(val) > 0) {
        if (val > this.pageNum) {
          this.toPage = 1
          this.pageCur = 1
        } else {
          this.toPage = Number(val)
          this.pageCur = this.toPage
        }
      } else {
        this.toPage = 1
        this.pageCur = 1
      }
    },
    // 更改每页多少条
    changePageSize (val) {
      this.pages = val
      if (Math.ceil(this.total / val) < this.pageCur) {
        this.isChangePageSize = false
        this.pageCur = 1
        this.toPage = 1
      } else {
        this.isChangePageSize = true
      }
      this.$emit('changePageSize', val, this.pageCur)
    }
  },
  computed: {
    // 总页数
    pageNum: function () {
      return this.total < 1 ? 1 : Math.ceil(this.total / this.pageSize)
    }
  }
}
</script>

<style scoped lang="stylus">
.pagination{
  padding 20px 20px 0
  font-size 12px
  color #333
  position absolute
  right 0
  bottom 0
}
</style>
